<template>
  <div class="main-layout">
    <!-- 左侧导航栏 -->
    <div class="left-sidebar">
      <div class="sidebar-header">
        <div class="logo">管理系统</div>
      </div>

      <div class="sidebar-menu">
        <div
          class="menu-item"
          :class="{ active: activeMainTab === 'teacher' }"
          @click="activeMainTab = 'teacher'"
        >
          <i class="icon icon-teacher"></i>
          <span><i style="display: inline-block; margin-right:20px;" class="el-icon-s-tools"></i>讲师管理</span>
        </div>
        <div
          class="menu-item"
          :class="{ active: activeMainTab === 'profile' }"
          @click="activeMainTab = 'profile'"
        >
          <i class="icon icon-user"></i>
          <span><i style="display: inline-block; margin-right:20px;" class="el-icon-user-solid"></i>个人中心</span>
        </div>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="right-content">
      <!-- 讲师信息管理 -->
      <div v-show="activeMainTab === 'teacher'" class="content-section">
        <div class="content-header">
          <h2>讲师信息管理</h2>
          <button
            style="
              margin-left: 10px;
              background-color: #4caf50;
              border: none;
              color: white;
              padding: 10px 20px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 16px;
              cursor: pointer;
              border-radius: 5px;
            "
            @click="showAddDialog = true"
          >
            新增讲师
          </button>
        </div>

        <div style="margin: 50px auto; width: 30%">
          <input
            type="text"
            v-model="searchQuery"
            placeholder="请输入搜索内容"
            @input="searchTeachers()"
            style="
              margin-bottom: 10px;
              width: 100%;
              padding: 10px;
              border-radius: 5px;
              border: 1px solid #ccc;
            "
          />
        </div>
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th v-for="(header, index) in headers" :key="index">
                  {{ header }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in paginatedArr" :key="index">
                <td>{{ item.name }}</td>
                <td :class="item.sexClass">
                  {{ item.sexText }}
                </td>
                <td>{{ formatDate(item.birthdata) }}</td>
                <td>{{ item.iphone }}</td>
                <td>{{ item.nick }}</td>
                <td :class="item.typeClass">
                  {{ item.typeText }}
                </td>
                <td class="actions">
                  <button class="btn-edit" @click="edit(item)">
                    <i class="icon-edit"></i> 编辑
                  </button>
                  <button class="btn-delete" @click="del(item.id)">
                    <i class="icon-delete"></i> 删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
        ></el-pagination>
      </div>
      <!-- 个人中心 -->
      <div v-show="activeMainTab === 'profile'" class="content-section">
        <div class="profile-container">
          <div class="profile-header">
            <h2>个人中心</h2>
          </div>

          <div class="profile-content">
            <div class="avatar-section">
              <div class="avatar-wrapper">
                <img
                  :src="
                    user.avatar ||
                    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                  "
                  alt="头像"
                />
                <div class="avatar-edit" @click="changeAvatar">
                  <i class="icon-camera"></i>
                </div>
              </div>
            </div>

            <div class="info-section">
              <div class="info-group">
                <h3>基本信息</h3>
                <div class="info-row">
                  <span class="label">用户名：</span>
                  <span class="value">{{ user.name }}</span>
                </div>
                <div class="info-row">
                  <span class="label">性别：</span>
                  <span class="value" :class="userSexClass">
                    {{ userSexText }}
                  </span>
                </div>
                <div class="info-row">
                  <span class="label">邮箱：</span>
                  <span class="value">{{ email || "未绑定" }}</span>
                </div>
              </div>

              <div class="info-group">
                <h3>账号安全</h3>
                <div class="info-row">
                  <span class="label">手机号：</span>
                  <span class="value" v-if="is_a">{{ sj || "未绑定" }}</span>
                  <span class="value" v-else>
                    <el-input
                      type="text"
                      v-model="newphone"
                      :disabled="is_a"
                      @blur="checkPhone"
                      placeholder="请输入新的手机号"
                    />
                  </span>
                  <el-button class="btn-action" @click="toggleBindPhone">
                    {{ sj ? "更换" : "绑定" }}
                  </el-button>
                </div>
                <div class="info-row">
                  <span class="label">密码：</span>
                  <span class="value" v-if="is_b">{{ formattedPassword }}</span>
                  <span class="value" v-else>
                    <el-input
                      type="password"
                      v-model="newPassword"
                      placeholder="请输入新密码"
                      @blur="checkPassword"
                    />
                  </span>
                  <el-button class="btn-action" @click="toggleChangePassword">
                    {{ is_b ? "修改密码" : "确认修改" }}
                  </el-button>
                </div>
                <el-button
                  style="margin-top: 20px; margin-bottom: 20px; background-color: #4caf50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; border-radius: 5px;"
                  class="btn-logout"
                  @click="logout()"
                >
                  注销账号
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加讲师弹出框 -->
    <el-dialog title="新增讲师" :visible.sync="showAddDialog" width="40%">
      <el-form :model="newTeacher" label-width="80px" :rules="editRules" ref="editForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="newTeacher.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="newTeacher.sex" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birthdata">
          <input
            type="date"
            id="birthday"
            name="birthday"
            v-model="newTeacher.birthdata"
            style="
              width: 80%;
              padding: 10px;
              border-radius: 5px;
              border: 1px solid #dcdfe6;
            "
          />
        </el-form-item>
        <el-form-item label="电话" prop="iphone">
          <el-input v-model="newTeacher.iphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nick">
          <el-input v-model="newTeacher.nick" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="讲师类型" prop="teachertype">
          <el-select
            v-model="newTeacher.teachertype"
            placeholder="请选择讲师类型"
          >
            <el-option label="讲师" value="1"></el-option>
            <el-option label="班主任" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="addTeacher()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改讲师弹出框 -->
    <el-dialog title="修改讲师" :visible.sync="showEditDialog" width="40%">
      <el-form :model="editTeacher" label-width="80px" :rules="editRules" ref="editForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editTeacher.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="editTeacher.sex" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birthdata">
          <input
            type="date"
            id="birthday"
            name="birthday"
            v-model="editTeacher.birthdata"
            style="
              width: 80%;
              padding: 10px;
              border-radius: 5px;
              border: 1px solid #dcdfe6;
            "
          />
        </el-form-item>
        <el-form-item label="电话" prop="iphone">
          <el-input v-model="editTeacher.iphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nick">
          <el-input v-model="editTeacher.nick" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="讲师类型" prop="teachertype">
          <el-select
            v-model="editTeacher.teachertype"
            placeholder="请选择讲师类型"
          >
            <el-option label="讲师" value="1"></el-option>
            <el-option label="班主任" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm('editForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getlist, addlist, searchlist, deletelist, updatelist } from "../utils/http.js";

export default {
  name: "HomeView",
  data() {
    return {
      newphone: "",
      is_a: true, // 初始值为 true，输入框被禁用
      is_b: true,
      email: JSON.parse(localStorage.getItem("user")).email,
      password: JSON.parse(localStorage.getItem("user")).password,
      activeMainTab: "teacher",
      arr: [],
      headers: ["姓名", "性别", "生日", "电话", "昵称", "讲师类型", "操作"],
      user: {
        name: JSON.parse(localStorage.getItem("user")).name || "未登录",
        avatar: "",
        sex: 0,
        phone: "",
        role: 1,
      },
      currentPage: 1,
      pageSize: 5,
      total: 1000,
      searchQuery: "",
      showAddDialog: false,
      showEditDialog: false,
      newTeacher: {
        name: "",
        sex: "",
        birthdata: "",
        iphone: "",
        nick: "",
        teachertype: "",
      },
      editTeacher: {
        id: "",
        name: "",
        sex: "",
        birthdata: "",
        iphone: "",
        nick: "",
        teachertype: "",
      },
      newPassword: "",
      editRules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
        birthdata: [{ required: true, message: '生日不能为空', trigger: 'change' }],
        iphone: [
          { required: true, message: '电话不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
        ],
        nick: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        teachertype: [{ required: true, message: '讲师类型不能为空', trigger: 'change' }],
      },
      sj: "",
    };
  },
  computed: {
    // 格式化密码
    formattedPassword() {
      if (!this.password) return "未设置";
      const password = this.password;
      const midStart = Math.floor(password.length / 2) - 2;
      const midEnd = midStart + 4;
      const maskedPassword =
        password.substring(0, midStart) + "****" + password.substring(midEnd);
      return maskedPassword;
    },
    // 计算用户性别和角色的样式
    userSexClass() {
      return { male: this.user.sex === 0, female: this.user.sex === 1 };
    },
    // 计算用户性别和角色的文字
    userSexText() {
      return this.user.sex === 0 ? "男" : "女";
    },
    // 计算用户角色的文字
    userRoleText() {
      return this.user.role === 1 ? "讲师" : "班主任";
    },
    // 计算分页后的数据
    paginatedArr() {
      if (!this.arr) return [];
      return this.arr
        .map((item) => ({
          ...item,
          sexClass: { male: item.sex === 0, female: item.sex === 1 },
          sexText: item.sex === 0 ? "男" : "女",
          typeClass: {
            lecturer: item.teachertype === 1,
            tutor: item.teachertype === 2,
          },
          typeText: item.teachertype === 1 ? "讲师" : "班主任",
        }))
        .slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
    },
  },
  methods: {
    // 注销账号
    logout() {
      if (confirm("确定要注销账号吗？")) {
        localStorage.removeItem("user");
        alert("注销成功，请重新登录");
        this.$router.push("/login");
      }
    },
    // 验证密码
    checkPassword() {
      if (this.newPassword.length < 6) {
        this.$message.error("密码至少6位");
        return false;
      }
      return true;
    },
    // 验证手机号
    checkPhone() {
      const phonePattern = /^1[3-9]\d{9}$/;
      if (!phonePattern.test(this.newphone)) {
        this.$message.error("请输入有效的手机号");
        return false;
      }
      return true;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      console.log(`当前页: ${page}`);
    },

    apply() {
      getlist()
        .then((res) => {
          if (res.status === 200) {
            this.arr = res.data.data.data;
            this.total = this.arr.length;
            console.log("加载的数据:", this.arr);
            console.log(`加载的数据总数: ${this.total}`);
          } else {
            this.$message.error("数据加载失败");
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("数据加载失败");
        });
    },
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return "-";
      return new Date(dateString).toLocaleDateString();
    },
    // 编辑讲师信息
    edit(item) {
      this.editTeacher = { ...item };
      this.showEditDialog = true;
    },
    // 删除讲师
    del(id) {
      deletelist(id).then((res) => {
        if (res.status === 200) {
          this.apply();
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    // 更换头像
    changeAvatar() {
      console.log("更换头像");
    },
    // 绑定/更换手机号
    toggleBindPhone() {
      if (this.is_a) {
        this.is_a = false; // 允许用户输入新的手机号
      } else {
        if (this.checkPhone()) {
          this.user.phone = this.newphone;
          localStorage.setItem('手机号', this.newphone);
          
          this.is_a = true; // 确认输入后禁用输入框
          this.$message.success("更换手机号成功");
        } 
      }
    },
    // 修改密码
    toggleChangePassword() {
      if (this.is_b) {
        this.is_b = false;
      } else {
        if (this.checkPassword()) {
          this.password = this.newPassword;
          this.newPassword = "";
          this.is_b = true;
          localStorage.setItem("user", JSON.stringify({ ...this.user, password: this.password }));
          this.$message.success("修改密码成功");
          alert("密码修改成功，请重新登录");
          this.$router.push("/login");
        }
      }
    },
    // 提交修改讲师表单
    submitEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.updateTeacher();
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    },
    // 更新讲师信息
    updateTeacher() {
      if (!this.editTeacher.id) {
        this.$message.error("讲师ID不能为空");
        return;
      }
      if (!this.editTeacher.name) {
        this.$message.error("姓名不能为空");
        return;
      }
      if (!this.editTeacher.sex) {
        this.$message.error("性别不能为空");
        return;
      }
      if (!this.editTeacher.iphone) {
        this.$message.error("电话不能为空");
        return;
      }
      if (!this.editTeacher.nick) {
        this.$message.error("昵称不能为空");
        return;
      }
      if (!this.editTeacher.teachertype) {
        this.$message.error("讲师类型不能为空");
        return;
      }
      const datas = {
        id: this.editTeacher.id,
        name: this.editTeacher.name,
        sex: this.editTeacher.sex,
        birthdata: this.editTeacher.birthdata,
        iphone: this.editTeacher.iphone,
        nick: this.editTeacher.nick,
        teachertype: this.editTeacher.teachertype,
      };
      console.log(datas);

      updatelist(datas)
        .then((res) => {
          if (res.status === 200) {
            this.apply();
            this.showEditDialog = false;
            this.$message.success("修改讲师成功");
          } else {
            this.$message.error("修改讲师失败");
          }
        })
        .catch((err) => {
          console.error("修改讲师失败:", err);
          this.$message.error("修改讲师失败");
        });
    },
    // 新增讲师
    add() {
      this.showAddDialog = true;
    },
    // 新增讲师提交
    addTeacher() {
      if (!this.newTeacher.name) {
        this.$message.error("姓名不能为空");
        return;
      }
      if (!this.newTeacher.sex) {
        this.$message.error("性别不能为空");
        return;
      }
      if (!this.newTeacher.iphone) {
        this.$message.error("电话不能为空");
        return;
      }
      if (!this.newTeacher.nick) {
        this.$message.error("昵称不能为空");
        return;
      }
      if (!this.newTeacher.teachertype) {
        this.$message.error("讲师类型不能为空");
        return;
      }
      const datas = {
        id: this.newTeacher.id,
        name: this.newTeacher.name,
        sex: this.newTeacher.sex,
        birthdata: this.newTeacher.birthdata,
        iphone: this.newTeacher.iphone,
        nick: this.newTeacher.nick,
        teachertype: this.newTeacher.teachertype,
      };
      console.log(datas);

      addlist(datas)
        .then((res) => {
          console.log(res);
          this.apply();
          this.showAddDialog = false;
          this.$message.success("新增讲师成功");
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("新增讲师失败");
        });
    },
    // 搜索讲师
    searchTeachers() {
      searchlist({
        name: this.searchQuery,
      })
        .then((res) => {
          if (res.status === 200) {
            this.arr = res.data.data.data;
            this.total = this.arr.length;
            this.currentPage = 1;
            console.log(`搜索结果总数: ${this.total}`);
          } else {
            this.$message.error("搜索失败");
          }
        })
        .catch((err) => {
          console.error("搜索失败:", err);
          this.$message.error("搜索失败");
        });
    },
  },
  mounted() {
    this.apply();
    this.sj = localStorage.getItem('手机号');
  },
};
</script>

<style lang="less" scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");

.main-layout {
  display: flex;
  min-height: 100vh;
  font-family: "Noto Sans SC", sans-serif;
  background: #f5f7fa;
}

/* 左侧导航栏样式 */
.left-sidebar {
  width: 220px;
  background: #2d3748;
  color: white;

  .sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #4a5568;

    .logo {
      font-size: 1.2rem;
      font-weight: 600;
      color: white;
    }
  }

  .sidebar-menu {
    padding: 10px 0;

    .menu-item {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      cursor: pointer;
      transition: all 0.3s;
      color: #cbd5e0;

      .icon {
        margin-right: 10px;
        font-size: 18px;
      }

      &:hover {
        background: #4a5568;
        color: white;
      }

      &.active {
        background: #4299e1;
        color: white;
      }
    }
  }
}

/* 右侧内容区样式 */
.right-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;

  .content-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }

  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      color: #2d3748;
      font-weight: 600;
      font-size: 1.3rem;
      margin: 0;
    }

    .btn-refresh {
      background: #4299e1;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.2s;

      &:hover {
        background: #3182ce;
      }

      i {
        margin-right: 6px;
      }
    }
  }

  .action-buttons {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .btn-add {
      background: #4caf50;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;

      &:hover {
        background: #45a049;
      }
    }

    .btn-search {
      background: #6c757d;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.2s;

      &:hover {
        background: #545b62;
      }

      i {
        margin-right: 6px;
      }
    }

    input {
      margin-right: 8px;
      padding: 8px 16px;
      border-radius: 4px;
      border: 1px solid #ced4da;
      font-size: 0.9rem;
      transition: all 0.2s;

      &:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }
    }
  }

  /* 表格样式 */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;

    th,
    td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #edf2f7;
    }

    th {
      background: #f7fafc;
      color: #4a5568;
      font-weight: 600;
    }

    tr:hover {
      background: #f8fafc;
    }

    .male {
      color: #4299e1;
      font-weight: 500;
    }

    .female {
      color: #d53f8c;
      font-weight: 500;
    }

    .lecturer {
      color: #38a169;
      font-weight: 500;
    }

    .tutor {
      color: #dd6b20;
      font-weight: 500;
    }

    .actions {
      display: flex;
      gap: 8px;

      button {
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        transition: all 0.2s;

        &:hover {
          transform: translateY(-1px);
        }
      }

      .btn-edit {
        background: #e6fffa;
        color: #38b2ac;

        &:hover {
          background: #b2f5ea;
        }
      }

      .btn-delete {
        background: #fff5f5;
        color: #f56565;

        &:hover {
          background: #fed7d7;
        }
      }
    }
  }

  /* 个人中心样式 */
  .profile-container {
    .profile-header {
      margin-bottom: 20px;

      h2 {
        color: #2d3748;
        font-weight: 600;
        font-size: 1.3rem;
        margin: 0;
      }
    }

    .profile-content {
      display: flex;

      .avatar-section {
        margin-right: 40px;

        .avatar-wrapper {
          position: relative;

          img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #edf2f7;
          }

          .avatar-edit {
            position: absolute;
            right: 5px;
            bottom: 5px;
            background: #4299e1;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              background: #3182ce;
            }
          }
        }
      }

      .info-section {
        flex: 1;

        .info-group {
          margin-bottom: 24px;

          h3 {
            color: #4a5568;
            font-size: 1rem;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #edf2f7;
          }

          .info-row {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            font-size: 0.95rem;

            .label {
              color: #718096;
              width: 80px;
            }

            .value {
              color: #2d3748;
              margin-right: 16px;
              font-weight: 500;
            }

            .btn-action {
              background: #ebf8ff;
              color: #3182ce;
              border: none;
              padding: 6px 12px;
              border-radius: 4px;
              font-size: 0.8rem;
              cursor: pointer;
              transition: all 0.2s;

              &:hover {
                background: #bee3f8;
              }
            }
          }
        }
      }
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .main-layout {
      flex-direction: column;
    }

    .left-sidebar {
      width: 100%;

      .sidebar-menu {
        display: flex;
        overflow-x: auto;

        .menu-item {
          min-width: 100px;
          padding: 12px 16px;
        }
      }
    }

    .profile-content {
      flex-direction: column;

      .avatar-section {
        margin-right: 0;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
      }

      .info-row {
        flex-wrap: wrap;

        .btn-action {
          margin-top: 8px;
          margin-left: 80px;
        }
      }
    }

    .data-table {
      font-size: 0.8rem;

      th,
      td {
        padding: 8px 12px;
      }

      .actions {
        flex-direction: column;
        gap: 4px;

        button {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
}
</style>
